<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box1 {
            height: 300px;
            width: 400px;
            border: solid 1px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        {{text}}
        <!-- v-model一般用于input表单中用于替换原value属性,对单选框.多选框和下拉列表不会替代其的value属性,但拥有收集其值的功能 -->
        <!-- 使用v-model绑定的数据再vue中是双向绑定,即当v-model改变时,就会直接修改vm实例中的值,同时当vm实例中的值修改时,v-model的值也回会被修改 -->
        <input type="text" v-model="text">
        <button @click="text='修改'">点击修改text值</button>

        <h1>收集表单中的其他数据</h1>
        <input type="text"><br>
        <template>
            <!-- 单个多选框时,为一个布尔值,一般用于对文档的同意// 不使用单选框的原因是,如果使用单选框,单选框只有一个时,可以选中无法取消 -->
            单个多选框<input type="checkbox" v-model="from.ischeck">
        </template>
        <template>
            <div>
                飞机 <input type="checkbox" value="飞机" v-model="from.check">
                火车 <input type="checkbox" value="火车" v-model="from.check">
            </div>
        </template>
        <template>
            <div>
                火鸡 <input type="radio" name="one" value="火鸡" v-model="from.radio">
                烤肉 <input type="radio" name="one" value="烤肉" v-model="from.radio">
            </div>
        </template>
        <template>
            <div>
                <!-- 使用v-model会替代掉原有的默认显示 -->
                <select name="FavoriteCity" v-model="from.select">
                    <option value="乌鲁木齐" selected>乌鲁木齐</option>
                    <option value="北京">北京</option>
                    <option value="湖北">湖北</option>
                    <option value="河南">河南</option>
                </select>
            </div>
        </template>
        <template>
            <div>
                <!-- 使用v-model会替代掉原有的默认显示 -->
                <!-- 使用multiple会将其替换成多选下拉列表,多选下拉列表使用数组存储 -->
                <select name="FavoriteCity" v-model="from.selectarr" multiple :style="{marginTop:'50px'}">
                    <option value="乌鲁木齐" selected>乌鲁木齐</option>
                    <option value="北京">北京</option>
                    <option value="湖北">湖北</option>
                    <option value="河南">河南</option>
                </select>
            </div>
        </template>
        <!-- 使用v-model的数据都为双向数据绑定, 所以在vm中创建的初始值可以直接影响到数据的初始显示 -->
        <div class="box1">
            <!-- 布尔值 -->
            <p>单个多选框 {{from.ischeck}}</p>
            <!-- 数组 -->
            <p>多个多选框:{{from.check}}</p>
            <!-- 字符串 -->
            <p>单选框:{{from.radio}} </p>
            <!-- 字符串 -->
            <p>下拉列表:{{from.select}}</p>
            <!--多选下拉列表  -->
            <p>下拉列表:{{from.selectarr}}</p>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    text: 'value',
                    from: {
                        ischeck: '',
                        check: [],
                        radio: '',
                        select: "北京",
                        selectarr: []
                    }
                };
            },
        });
    </script>
</body>

</html>